<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/elementui.css">
    <!-- 引入组件库 -->
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/elementui.js"></script>
    <script src="../static/js/axios.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item label="地址">
                <el-input v-model.trim="formData.address" placeholder="地址"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="data"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="id">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="省">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="市">
            </el-table-column>
            <el-table-column
                    prop="area"
                    label="区">
            </el-table-column>
            <el-table-column
                    prop="street"
                    label="街道">
            </el-table-column>

        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </template>
</div>
</body>
</html>
<script>

    new Vue({
        el:"#app",
        data: {
                data: [],
                size: 10,
                currentPage: 1,
                total: 0,
                formData:{
                    address:"",
                },
                dialogFormVisible: false,
                deleteDialogVisible: false,
                form:{},
            },
        created(){
            this.getData();
        },
        methods:{
            getData() {
                axios.get(`/ship-address/page?page=${this.currentPage}&size=${this.size}`,
                    {
                        params: this.formData
                    }).then(response => {
                    console.log(response.data);
                    if(!response.data.success){
                        this.$message.error(response.data.msg);
                    }else{
                        this.data = response.data.data.content;
                        this.total = response.data.data.totalElements;
                    }
                })
            },
            handleCurrentChange(){
                this.getData();
            },
            handleSizeChange(val){
                this.size = val;
                this.getData();
            },
        }
    });

</script>